<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{marginBottom: '24px'}">
        <keep-alive>
          <chart-card :loading="loading" title="总流程数" :total="vwflowTotal">
            <a-tooltip title="指标说明" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
            <div>
              <trend :flag="vwflowMonthlyRatio > 0 ? 'up' : 'down'" style="margin-right: 16px;">
                <span slot="term">月同比</span>
                {{ vwflowMonthlyRatio }}%
              </trend>
              <trend :flag="vwflowDailyRatio > 0 ? 'up' : 'down'">
                <span slot="term">日同比</span>
                {{ vwflowDailyRatio }}%
              </trend>
            </div>
            <template slot="footer">
              <trend style="margin-right: 16px;">
                <span slot="term">月流程数</span>
                {{ vwflowMonthTotal }}
              </trend>
              <trend style="margin-left: 16px;">
                <span slot="term">日流程数</span>
                {{ vwflowDayTotal }}
              </trend>
            </template>
          </chart-card>
        </keep-alive>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{marginBottom: '24px'}">
        <keep-alive>
          <chart-card :loading="loading" title="总用户数" :total="vuserTotal | NumberFormat">
            <a-tooltip title="指标说明" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
            <div>
              <trend
                :flag="(vNewUserTotal - vNewUserTotalLast) > 0 ? 'up' : 'down'"
                style="margin-right: 16px;"
              >
                <span slot="term">月同比</span>
                {{ (((vNewUserTotal - vNewUserTotalLast) / vNewUserTotalLast) * 100 ).toFixed(2) }}%
              </trend>
            </div>
            <template slot="footer">
              <trend style="margin-right: 16px;">
                <span slot="term">月新增用户数</span>
                {{ vNewUserTotal }}
              </trend>
              <trend style="margin-left: 16px;">
                <span slot="term">日均新增用户</span>
                {{ vNewUserTotalD }}
              </trend>
            </template>
          </chart-card>
        </keep-alive>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{marginBottom: '24px'}">
        <keep-alive>
          <chart-card :loading="loading" title="总访问量" :total="vtotal | NumberFormat">
            <a-tooltip title="指标说明" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
            <div>
              <trend :flag="mtotalRatio > 0 ? 'up' : 'down'" style="margin-right: 16px;">
                <span slot="term">月同比</span>
                {{ mtotalRatio }}%
              </trend>
            </div>
            <template slot="footer">
              <trend style="margin-right: 16px;">
                <span slot="term">月访问量</span>
                {{ mtotal }}
              </trend>
              <trend style="margin-left: 16px;">
                <span slot="term">日访问量</span>
                {{ ctotal }}
              </trend>
            </template>
          </chart-card>
        </keep-alive>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{marginBottom: '24px'}">
        <keep-alive>
          <chart-card :loading="loading" title="总业务数" :total="vBussinessTotal | NumberFormat">
            <a-tooltip title="指标说明" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
            <div>
              <trend :flag="'up'" style="margin-right: 16px;">
                <span slot="term">行政业务</span>
                {{ 35 }}%
              </trend>
              <trend :flag="'up'">
                <span slot="term">财务业务</span>
                {{ 15 }}%
              </trend>
            </div>
            <template slot="footer">
              业务分布
              <span style="margin-left:5px;">行政、财务、任务、博客、文档</span>
            </template>
          </chart-card>
        </keep-alive>
      </a-col>
    </a-row>
    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <keep-alive>
          <a-tabs
            size="large"
            defaultActiveKey="1"
            v-model="activeKey"
            @change="getData"
            :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}"
          >
            <div class="extra-wrapper" slot="tabBarExtraContent">
              <div class="extra-item">
                <a-tag color="cyan" @click="reloadData()">&nbsp;刷&nbsp;新&nbsp;</a-tag>
              </div>
            </div>
            <a-tab-pane loading="true" tab="我的待办" key="1" style>
              <template>
                <div style="top:50px;">
                  <a-spin :spinning="spinning" style="top:50px;">
                    <div class="spin-content"></div>
                  </a-spin>
                </div>
                <a-table
                  :columns="columns"
                  :dataSource="dataWaitList"
                  :pagination="false"
                  style="padding-top:-10px;margin-top:-10px"
                >
                  <a slot="type" slot-scope="text, record">
                    <a-menu-item>
                      <a :data-info="JSON.stringify(record)" @click="handleDetailWF(record)">
                        <span v-html="record.type"></span>
                      </a>
                    </a-menu-item>
                  </a>
                  <a slot="topic" slot-scope="text, record">
                    <a-menu-item>
                      <a
                        :data-info="JSON.stringify(record)"
                        @click="handleDetailWF(record)"
                        style="color:#303030;"
                      >
                        <span style="color:#303030;" v-html="record.topic"></span>
                      </a>
                    </a-menu-item>
                  </a>

                  <span slot="name" slot-scope="text, record">
                    <a-tag
                      :color="record.name.length > 5 ? 'geekblue' : 'green'"
                      :key="record.name"
                      @click="handleDetailWF(record)"
                    >{{ record.name.toUpperCase() }}</a-tag>
                  </span>

                  <span slot="username" slot-scope="username">
                    <a-tag
                      v-for="tag in username"
                      :color="
                        tag === 'admin'
                          ? 'volcano'
                          : tag.length > 5
                          ? 'geekblue'
                          : 'green'
                      "
                      :key="tag"
                    >{{ tag }}</a-tag>
                  </span>

                  <span slot="proponents" slot-scope="text, record">
                    <a-tag color="volcano" :key="record.proponents">
                      {{
                      record.proponents
                      }}
                    </a-tag>
                  </span>

                  <span slot="create_time" slot-scope="text, record">
                    <a-tag color="red" :key="record.create_time">{{ record.create_time }}</a-tag>
                  </span>
                </a-table>
              </template>
            </a-tab-pane>
            <a-tab-pane loading="true" tab="我的已办" key="2">
              <template>
                <div style="top:50px;">
                  <a-spin :spinning="spinning" style="top:50px;">
                    <div class="spin-content"></div>
                  </a-spin>
                </div>
                <a-table
                  :columns="columns"
                  :dataSource="dataDoneList"
                  :pagination="false"
                  style="padding-top:-10px;margin-top:-10px"
                >
                  <a slot="type" slot-scope="text, record">
                    <a-menu-item>
                      <a :data-info="JSON.stringify(record)" @click="handleDetailWF(record)">
                        <span v-html="record.type"></span>
                      </a>
                    </a-menu-item>
                  </a>

                  <a slot="topic" slot-scope="text, record">
                    <a-menu-item>
                      <a
                        :data-info="JSON.stringify(record)"
                        @click="handleDetailWF(record)"
                        style="color:#303030;"
                      >
                        <span style="color:#303030;" v-html="record.topic"></span>
                      </a>
                    </a-menu-item>
                  </a>

                  <span slot="name" slot-scope="text, record">
                    <a-tag
                      :color="record.name.length > 5 ? 'geekblue' : 'green'"
                      :key="record.name"
                      @click="handleDetailWF(record)"
                    >{{ record.name }}</a-tag>
                  </span>

                  <span slot="username" slot-scope="text, record">
                    <a-tag
                      v-for="tag in record.username"
                      :color="
                        tag === 'admin'
                          ? 'volcano'
                          : tag.length > 5
                          ? 'geekblue'
                          : 'green'
                      "
                      :key="tag"
                    >{{ tag }}</a-tag>
                  </span>

                  <span slot="proponents" slot-scope="text, record">
                    <a-tag color="volcano" :key="record.proponents">
                      {{
                      record.proponents
                      }}
                    </a-tag>
                  </span>

                  <span slot="create_time" slot-scope="text, record">
                    <a-tag color="blue" :key="record.create_time">{{ record.create_time }}</a-tag>
                  </span>
                </a-table>
              </template>
            </a-tab-pane>
            <a-tab-pane loading="true" tab="行政公告" key="5">
              <template>
                <div style="top:50px;">
                  <a-spin :spinning="spinning" style="top:50px;">
                    <div class="spin-content"></div>
                  </a-spin>
                </div>
                <a-table
                  :columns="announce_columns"
                  :dataSource="dataAnnounceList"
                  :pagination="false"
                  style="padding-top:-10px;margin-top:-10px"
                >
                  <span slot="announce_type" slot-scope="text, record">
                    <a-tag
                      color="cyan"
                      :key="record.announce_type"
                      @click="handleAnnounceInfo(record, record.table_name)"
                    >{{ record.announce_type }}</a-tag>
                  </span>
                  <span slot="ctitle" slot-scope="text, record">
                    <a
                      :key="record.title"
                      @click="handleAnnounceInfo(record, record.table_name)"
                      style="color:#303030;"
                    >{{ record.title }}</a>
                  </span>
                  <span slot="create_by" slot-scope="text, record">
                    <a-tag color="geekblue" :key="record.create_by">
                      {{
                      record.create_by
                      }}
                    </a-tag>
                  </span>
                  <span slot="create_time" slot-scope="text, record">
                    <a-tag color="pink" :key="record.create_time">
                      {{
                      record.create_time
                      }}
                    </a-tag>
                  </span>
                </a-table>
              </template>
            </a-tab-pane>
            <a-tab-pane loading="true" tab="红头文件" key="6">
              <template>
                <div style="top:50px;">
                  <a-spin :spinning="spinning" style="top:50px;">
                    <div class="spin-content"></div>
                  </a-spin>
                </div>
                <a-table
                  :columns="announce_columns"
                  :dataSource="dataHeadList"
                  :pagination="false"
                  style="padding-top:-10px;margin-top:-10px"
                >
                  <span slot="announce_type" slot-scope="text, record">
                    <a-tag
                      color="cyan"
                      :key="record.announce_type"
                      @click="handleAnnounceInfo(record, record.table_name)"
                    >{{ record.announce_type }}</a-tag>
                  </span>
                  <span slot="ctitle" slot-scope="text, record">
                    <a
                      :key="record.title"
                      @click="handleAnnounceInfo(record, record.table_name)"
                      style="color:#303030;"
                    >{{ record.title }}</a>
                  </span>
                  <span slot="create_by" slot-scope="text, record">
                    <a-tag color="geekblue" :key="record.create_by">
                      {{
                      record.create_by
                      }}
                    </a-tag>
                  </span>
                  <span slot="create_time" slot-scope="text, record">
                    <a-tag color="pink" :key="record.create_time">
                      {{
                      record.create_time
                      }}
                    </a-tag>
                  </span>
                </a-table>
              </template>
            </a-tab-pane>
            <a-tab-pane loading="true" tab="新闻资讯" key="7">
              <template>
                <div style="top:50px;">
                  <a-spin :spinning="spinning" style="top:50px;">
                    <div class="spin-content"></div>
                  </a-spin>
                </div>
                <a-table
                  :columns="announce_columns"
                  :dataSource="dataNewsList"
                  :pagination="false"
                  style="padding-top:-10px;margin-top:-10px"
                >
                  <span slot="announce_type" slot-scope="text, record">
                    <a-tag
                      color="cyan"
                      :key="record.announce_type"
                      @click="handleAnnounceInfo(record, record.table_name)"
                    >{{ record.announce_type }}</a-tag>
                  </span>
                  <span slot="ctitle" slot-scope="text, record">
                    <a
                      :key="record.title"
                      @click="handleAnnounceInfo(record, record.table_name)"
                      style="color:#303030;"
                    >{{ record.title }}</a>
                  </span>
                  <span slot="create_by" slot-scope="text, record">
                    <a-tag color="geekblue" :key="record.create_by">
                      {{
                      record.create_by
                      }}
                    </a-tag>
                  </span>
                  <span slot="create_time" slot-scope="text, record">
                    <a-tag color="pink" :key="record.create_time">
                      {{
                      record.create_time
                      }}
                    </a-tag>
                  </span>
                </a-table>
              </template>
            </a-tab-pane>
            <a-tab-pane loading="true" tab="奖罚通报" key="8">
              <template>
                <div style="top:50px;">
                  <a-spin :spinning="spinning" style="top:50px;">
                    <div class="spin-content"></div>
                  </a-spin>
                </div>
                <a-table
                  :columns="announce_columns"
                  :dataSource="dataNoticeList"
                  :pagination="false"
                  style="padding-top:-10px;margin-top:-10px"
                >
                  <span slot="announce_type" slot-scope="text, record">
                    <a-tag
                      color="cyan"
                      :key="record.announce_type"
                      @click="handleAnnounceInfo(record, record.table_name)"
                    >{{ record.announce_type }}</a-tag>
                  </span>
                  <span slot="ctitle" slot-scope="text, record">
                    <a
                      :key="record.title"
                      @click="handleAnnounceInfo(record, record.table_name)"
                      style="color:#303030;"
                    >{{ record.title }}</a>
                  </span>
                  <span slot="create_by" slot-scope="text, record">
                    <a-tag color="geekblue" :key="record.create_by">
                      {{
                      record.create_by
                      }}
                    </a-tag>
                  </span>
                  <span slot="create_time" slot-scope="text, record">
                    <a-tag color="pink" :key="record.create_time">
                      {{
                      record.create_time
                      }}
                    </a-tag>
                  </span>
                </a-table>
              </template>
            </a-tab-pane>
            <a-tab-pane loading="true" tab="市场观察" key="9">
              <template>
                <div style="top:50px;">
                  <a-spin :spinning="spinning" style="top:50px;">
                    <div class="spin-content"></div>
                  </a-spin>
                </div>
                <a-table
                  :columns="announce_columns"
                  :dataSource="dataViewsList"
                  :pagination="false"
                  style="padding-top:-10px;margin-top:-10px"
                >
                  <span slot="announce_type" slot-scope="text, record">
                    <a-tag
                      color="cyan"
                      :key="record.announce_type"
                      @click="handleAnnounceInfo(record, record.table_name)"
                    >{{ record.announce_type }}</a-tag>
                  </span>
                  <span slot="ctitle" slot-scope="text, record">
                    <a
                      :key="record.title"
                      @click="handleAnnounceInfo(record, record.table_name)"
                      style="color:#303030;"
                    >{{ record.title }}</a>
                  </span>
                  <span slot="create_by" slot-scope="text, record">
                    <a-tag color="geekblue" :key="record.create_by">
                      {{
                      record.create_by
                      }}
                    </a-tag>
                  </span>
                  <span slot="create_time" slot-scope="text, record">
                    <a-tag color="blue" :key="record.create_time">
                      {{
                      record.create_time
                      }}
                    </a-tag>
                  </span>
                </a-table>
              </template>
            </a-tab-pane>
          </a-tabs>
        </keep-alive>
      </div>
    </a-card>

    <a-row>
      <template>
        <div>
          <a-back-top />
        </div>
      </template>
    </a-row>
  </div>
</template>

<script>
import ChartCard from "@/components/ChartCard";
import Trend from "@/components/Trend";
import { getLoginfo, getVisitInfo } from "@/api/api";
import * as manageAPI from "@/api/manage";
import * as storage from "@/utils/storage";
import * as tools from "@/utils/util";

() => window.manageAPI = this.manageAPI;
() => window.storage = storage;
() => window.tools = tools;

const rankList = [];
const barData = [];
const columns = window.wflow_columns;
const announce_columns = window.announce_columns;

export default {
  name: "Analysis",
  components: {
    ChartCard,
    Trend
  },
  data() {
    return {
      loading: true,
      vtotal: 0,
      ctotal: 0,
      mtotal: 0,
      mtotalLast: 0,
      mtotalRatio: 0.0,
      center: null,
      rankList,
      barData,
      loginfo: {},
      visitFields: ["ip", "visit"],
      visitInfo: [],
      vuserTotal: "-",
      vNewUserTotal: "-",
      vNewUserTotalD: "-",
      vNewUserTotalLast: "",
      vwflowTotal: "-",
      vwflowMonthTotal: "-",
      vwflowDayTotal: "-",
      vwflowDailyRatio: "-",
      vwflowMonthlyRatio: "-",
      vBussinessTotal: "-",
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      dataWaitList: [],
      dataDoneList: [],
      dataAnnounceList: [],
      dataNoticeList: [],
      dataHeadList: [],
      dataNewsList: [],
      dataViewsList: [],
      dataNotice: [],
      columns,
      announce_columns,
      activeKey: "1",
      loadingMore: false,
      showLoadingMore: true,
      spinning: false
    };
  },
  async created() {

    //执行登录信息初始化
    await this.initLogInfo();
    await this.getData(1);

    //取消加载状态图标显示
    this.loading = !this.loading;

    //保持session在线
    window.keepAlive(storage , manageAPI );

  },

  /**
   * @function 钩子函数
   */
  async mounted() {
    await this.getData();
  },


  methods: {  

    /**
     * @function 获取初始化数据
     */
    async getData(key) {
      
      await window.getData(this, key, storage , manageAPI ); 

    },

    /**
     * @function 将列表中的用户信息的英文名转为中文名
     */
    async transUsername(list) {
      await window.transUsername(list, tools , storage , manageAPI );
    },

    /**
     * @function 刷新页面
     */
    async reloadData() {
      await window.reloadData(this, tools , storage , manageAPI );
    },

    /**
     * @function 刷新近期访问统计
     */
    async reloadVisitData() {
      await this.initLogInfo();
    },

    /**
     * @function 查看详情页面
     */
    async handleDetailWF(record) {
      await window.handleDetailWF(this , record, storage );
    },
    
    /**
     * @function 查看详情页面
     */
    async handleAnnounceInfo(record, tableName) {
      await window.handleAnnounceInfo(this, record, tableName, storage);
    },

    /**
     * @function 获取近期用户访问统计，
     */
    async initLogInfo() {
      await window.initLogInfo(this, getLoginfo, getVisitInfo, manageAPI) ;
    }
  }
};
</script>

<style lang="scss" scoped>
thead.ant-table-thead {
  display: none;
}
.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 0.95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }
  p {
    line-height: 42px;
    margin: 0;
    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}
</style>
